import { defineComponent, ref, computed, onMounted } from 'vue';
import  VuePdfEmbed from 'vue-pdf-embed';
import { useRoute } from 'vue-router';
import styles from './pdfPreview.module.less';

export default defineComponent({
  name: 'PdfPreview',
  setup() {
    const route = useRoute();
    const pdfSource = ref(null);
    const currentPage = ref(1);
    const totalPages = ref(0);
    const rotation = ref(0);
    const zoom = ref(1.4);
    const loading = ref(false);
    const error = ref('');

    // 从路由参数中获取PDF URL，默认为示例文档
    const pdfUrl = computed(() => {
      return `${import.meta.env.VITE_APP_BASE_URL}/${decodeURIComponent(route.query.url)}` ;
    });

    // 加载PDF文件
    const loadPdf = async () => {
      try {
        loading.value = true;
        error.value = '';
        
        // 直接设置PDF源，不使用pdfjs获取页数
        pdfSource.value = pdfUrl.value;
        currentPage.value = 1;
        
        // 由于不使用pdfjs，我们无法提前获取总页数
        // 可以在PDF渲染完成后通过VuePdfEmbed的事件获取
      } catch (err) {
        console.error('加载PDF失败:', err);
        error.value = `加载PDF失败: ${err.message || '未知错误'}`;
      } finally {
        loading.value = false;
      }
    };

    // 上一页
    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };

    // 下一页
    const nextPage = () => {
      // 由于无法提前获取总页数，这里不做上限检查
      // 实际使用中，超出页数的请求会被VuePdfEmbed自动处理
      currentPage.value++;
    };

    // 跳转到指定页码
    const goToPage = (pageNum) => {
      const num = parseInt(pageNum);
      if (!isNaN(num) && num >= 1) {
        currentPage.value = num;
      }
    };

    // 放大
    const zoomIn = () => {
      zoom.value += 0.1;
    };

    // 缩小
    const zoomOut = () => {
      if (zoom.value > 0.2) {
        zoom.value -= 0.1;
      }
    };

    // 旋转PDF
    const rotate = () => {
      rotation.value = (rotation.value + 90) % 360;
    };

    // 重置视图
    const resetView = () => {
      zoom.value = 1;
      rotation.value = 0;
    };

    // 处理渲染错误
    const handleRenderError = (err) => {
      error.value = `渲染失败: ${err.message || '未知错误'}`;
    };

    // 组件挂载时加载PDF
    onMounted(() => {
      loadPdf();
    });

    return () => (
      <div class={styles.pdfPreviewContainer}>
        {/* 加载状态 */}
        {loading.value && (
          <div class={styles.loadingOverlay}>
            <div class={styles.loadingSpinner}></div>
            <p>加载中...</p>
          </div>
        )}

        {/* 错误信息 */}
        {!loading.value && error.value && (
          <div class={styles.errorMessage}>
            {error.value}
          </div>
        )}

        {/* PDF内容区域 */}
        {!loading.value && !error.value && (
          <div class={styles.pdfContent}>
            <div 
              class={styles.pdfWrapper} 
              style={{ transform: `scale(${zoom.value}) rotate(${rotation.value}deg)` }}
            >
              <VuePdfEmbed
                source={pdfSource.value}
                page={currentPage.value}
                class={styles.pdfEmbed}
                onRenderError={handleRenderError}
              />
            </div>
          </div>
        )}

        {/* 控制栏 */}
       
        {!loading.value && !error.value && (
              <div class={styles.pdfControls}>
                <nut-button type="primary" onClick={prevPage} disabled={currentPage.value <= 1}>上一页</nut-button>
              
                <nut-button type="primary" onClick={nextPage}>
                  下一页
                </nut-button>

                {/* 分隔线 */}
                <nut-divider />
                {/* 缩放控制 */}
                <nut-button type="primary" onClick={zoomOut}>缩小</nut-button>
                <nut-button type="primary" onClick={resetView}>重置</nut-button>
                <nut-button type="primary" onClick={zoomIn}>放大</nut-button>
              </div>
         )}
      </div>
    );
  }
});